#+TITLE: HTML or webmode set up
#+AUTHOR:Joshua Branson
#+LATEX_HEADER: \usepackage{lmodern}
#+LATEX_HEADER: \usepackage[QX]{fontenc}

This file sets up most of my webmode configurations.  Webmode, in my opinion, is probably the best way to write html documents.

* web-mode
:PROPERTIES:
:ID:       c29ded10-1cef-41ee-8e79-a7523d710a6c
:END:

** use package-definition
:PROPERTIES:
:ID:       25e8d609-4ebf-460d-8fc5-ddf3a26d0f74
:END:
#+BEGIN_SRC emacs-lisp

  (use-package web-mode
    :config
    ;;I'm not sure what this does
    (setq web-mode-extra-constants '(("php" . ("CONS1" "CONS2"))))
    ;; <?php expands to <?php ?>
    (setq web-mode-enable-auto-pairing t)
    ;; Example - you may want to add hooks for your own modes.
    ;; when I open a css file use css-mode that way I can set up flychech with it!
    (setq web-mode-extra-auto-pairs
          '(("erb"  . (("beg" "end")))
            ("php"  . (("beg" "end")
                       ("beg" "end")))
            ))
    (setq web-mode-engines-alist
          '(("php"  . "\\.php\\.")
            ("django"  . "\\.djhtml\\.")))

    :mode
    (("\\.html?\\'" . web-mode)
      ("\\.php?\\'"  . web-mode)
      ("\\.phtml?\\'" . web-mode))
    )
#+END_SRC

** web-mode hook
:PROPERTIES:
:ID:       ed2ace18-5e60-4ca7-9350-fd1a86a25749
:END:
#+BEGIN_SRC emacs-lisp
(add-hook 'web-mode-hook '(lambda ()
                            ;;(use-package emmet-mode )
                            ;; I've installed http://phpmd.org/ to check my php code using flycheck
                            ;; BUT flycheck mode does NOT support web-mode
                            ;; I can't get ggtags mode to workwell.
                            ;; (ggtags-mode 1)
                            ;; (diminish 'ggtags-mode)
                            ;; I have abbrev turned on for all prog-modes and all text modes.
                            ;; (abbrev-mode 1)
                            ;;emmet mode for html % css related things
                            (emmet-mode)
                            ;; turn urls into clickable links.
                            (goto-address-mode)
                            (local-unset-key (kbd "C-<return>"))
                            (define-key web-mode-map (kbd "C-<return>") '(lambda ()
                                                                           (interactive)
                                                                           (newline)
                                                                           (evil-open-above 0)))
                            ;;(push '("function" . ?𝆑) prettify-symbols-alist)
                            ;; I should not enable aggressive indent mode for soihub files.
                            ;; There's no need to have lots of git diffs with files.
                            ;; unset web mode's C-c C-h command, because I want to use that for 'help
                            (local-unset-key (kbd "C-c C-h"))
                            (global-set-key (kbd "C-c C-h") 'help)))

#+END_SRC

** Emmet mode is awesome!  You can specify complex html structures like so:
    :PROPERTIES:
    :ID:       29e58b30-1f2a-477f-96ba-10dc97754364
    :END:

  #+BEGIN_SRC emacs-lisp
      (use-package emmet-mode  :defer t
        :bind (("C-c j" . emmet-expand-line)
               ("C-j" . emmet-expand-line)))
  #+END_SRC

  ~div>.col-sm-3*4>a[href="www.google.com"]>img~

  The above can be expanded into

  #+BEGIN_SRC html
    <div>
        <div class="col-sm-3">
            <a href="www.google.com"><img alt="" src=""/></a>
        </div>
        <div class="col-sm-3">
            <a href="www.google.com"><img alt="" src=""/></a>
        </div>
        <div class="col-sm-3">
            <a href="www.google.com"><img alt="" src=""/></a>
        </div>
        <div class="col-sm-3">
            <a href="www.google.com"><img alt="" src=""/></a>
        </div>
    </div>
  #+END_SRC

** Trying to get web-mode to add italics to <em>
    :PROPERTIES:
    :ID:       e350f24c-5e32-42a8-aa43-0885599f2475
    :END:
    I want "some italic text" to be italic.  I can apparently do this with font-lock mode, via searching.
<em>some italic text</em>

#+BEGIN_SRC emacs-lisp
  (add-hook 'web-mode-hook 'my/add-web-mode-richtext)

  (defun my/add-web-mode-richtext ()
    "Add bold and italic text with <b> and <em> tags."
    (interactive)
    (highlight-regexp "<em>\\([-_a-zA-Z0-9@!?$&*:#%, ]+\\)</em>" 'web-mode-italic-face)
    (highlight-regexp "<b>\\([-_a-zA-Z0-9@!?$&*:#%, ]+\\)</b>" 'web-mode-bold-face))
#+END_SRC

I'm supposed to use regexp-opt function to help me design a regexp, but this function doesn't help too much.
It just says, if you see this string, or this string, or this string, ...

I've tried to get it to make an optimized regexp, but no such luck.

#+BEGIN_SRC emacs-lisp :exports none :tangle no
 (regexp-opt '(
               "<em>Hello how are you</em>"
               "<em>What are you doing today?</em>"
               "<em>My name is Earl.</em>"
               "<em>stnh satneuh staeoh ntshaoe sntaheu </em>"
               "<em>James bond is awesome </em>"
               "<em>lorum ipsum this can't keep going on.</em>"
               "<em> WHAT!? Come on! </em>"
               "<em> anything sing silly text .*<em>"
               ))

(regexp-opt '("<em>\\([a-zA-Z0-9 ]+\\)</em>"))

(regexp-opt '("<em></em>"))
#+END_SRC

I accomplish highlighting comments with this bit of [[file:init-gui-frames.org::*color%20various%20comments][code.]]


Probably the best way to do is to use font-lock-add-keywords and specify the mode I want.

=(font-lock-add-keywords MODE KEYWORDS & optional HOW)=

MODE has to be a symbol like ='web-mode=, but KEYWORDS has several options.

MATCHER
(MATCHER . SUBEXP)
(MATCHER . FACENAME)
(MATCHER . HIGHLIGHT)
(MATCHER HIGHTLIGHT ...)
(eval . FORM)

List faces display, lists all of the faces that one can use.

#+BEGIN_SRC emacs-lisp :tangle no
  (font-lock-add-keywords 'web-mode
                          '(("<em>\\([a-zA-Z0-9 ]+\\)</em>" . 'web-mode-italic-face)
                            ("<b>\\([a-zA-Z0-9 ]+\\)</b>"   . 'web-mode-bold-face)))

#+END_SRC

* Css Settings
:PROPERTIES:
:ID:       4560dc06-d827-4cc9-913b-a2a138ec2d8c
:END:
#+BEGIN_SRC emacs-lisp
  (defun my-css-minify-function ()
    "Minifying my css files."
    (interactive)
    (when (eq major-mode 'css-mode)
      (async-shell-command (concat (format "yuicompressor --type css  %s -o "
                                           (buffer-file-name))
                                   (s-replace ".css" ".min.css" buffer-file-name)) "*css minifying*")))

  (add-to-list 'display-buffer-alist (cons "\\\*css minifying\\\*" (cons #'display-buffer-no-window nil)))

  (add-hook 'css-mode-hook '(lambda ()
                              (add-hook 'after-save-hook 'my-css-minify-function nil t)))


#+END_SRC

** setting up default indent styles
This will probably come in handy some day.

#+BEGIN_SRC emacs-lisp :tangle no
(defun my-setup-indent (n)
  ;; web development
  (setq coffee-tab-width n) ; coffeescript
  (setq javascript-indent-level n) ; javascript-mode
  (setq js-indent-level n) ; js-mode
  (setq js2-basic-offset n) ; js2-mode
  (setq web-mode-markup-indent-offset n) ; web-mode, html tag in html file
  (setq web-mode-css-indent-offset n) ; web-mode, css in html file
  (setq web-mode-code-indent-offset n) ; web-mode, js code in html file
  (setq css-indent-offset n) ; css-mode
  )

(defun my-coding-style ()
  (interactive)
  (message "My coding style!")
  (setq indent-tabs-mode t) ; use tab instead of space
  (my-setup-indent 2) ; indent 4 spaces width
  )
#+END_SRC

* COMMENT things I don't use
** COMMENT php-mode
I don't use php-mode.  php-mode cannot indent html and js code embedded in the buffer.

If you are doing something like wordpress hacking, where your buffer contains only php code, then php-mode is probably the most that you want to use.

;; use flycheck in php buffers as well. it's a real shame that flycheck doesn't support web-mode
;; (add-hook 'php-mode-hook (lambda ()
;;                            ;; I have abbrev mode turned on for all prog-modes and all text-modes
;;                            ;; (abbrev-mode 1)
;;                            (define-key php-mode-map (kbd "C-<return>") '(lambda ()
;;                                                                           (interactive)
;;                                                                           (newline)
;;                                                                           (evil-open-above 0)))
;;                            ;;(push '("function" . ?𝆑) prettify-symbols-alist)
;;                            (push '(">=" . ?≥) prettify-symbols-alist)
;;                            (push '("<=" . ?≤) prettify-symbols-alist)
;;                            (push '("->" . ?⟶) prettify-symbols-alist)
;;                            (push '("=>" . ?⟹) prettify-symbols-alist)
;;                            (push '("\\geq" . ?≥) prettify-symbols-alist)
;;                            (push '("\\leq" . ?≤) prettify-symbols-alist)
;;                            (push '("\\neg" . ?¬) prettify-symbols-alist)
;;                            (push '("\\rightarrow" . ?→) prettify-symbols-alist)
;;                            (push '("\\leftarrow" . ?←) prettify-symbols-alist)
;;                            (push '("\\infty" . ?∞) prettify-symbols-alist)
;;                            ;; this would make a comment look really weird <--  right-arrow
;;                            ;;(push '("-->" . ?→) prettify-symbols-alist)
;;                            (push '("<--" . ?←) prettify-symbols-alist)
;;                            (push '("\\exists" . ?∃) prettify-symbols-alist)
;;                            (push '("\\nexists" . ?∄) prettify-symbols-alist)
;;                            (push '("\\forall" . ?∀) prettify-symbols-alist)
;;                            (push '("\\or" . ?∨) prettify-symbols-alist)
;;                            (push '("\\and" . ?∧) prettify-symbols-alist)
;;                            (push '(":)" . ?☺) prettify-symbols-alist)
;;                            ;;(push '("):" . ?☹) prettify-symbols-alist)
;;                            (push '(":D" . ?☺) prettify-symbols-alist)
;;                            (push '("^_^" . ?☻) prettify-symbols-alist)
;;                            ;;(setq ac-sources '(ac-source-filename ac-source-words-in-buffer))
;;                            ))
** COMMENT spell checking

http://blog.binchen.org/posts/effective-spell-check-in-emacs.html

Do some spell checking in web-mode.  I suppose it's possible.
** COMMENT php-eldoc ?
(use-package php-eldoc )
** COMMENT some ac complete stuff that I don't really use

;; (setq web-mode-ac-sources-alist '(("css" . (ac-source-css-property ac-source-html-bootstrap+)) ("html" . (ac-source-words-in-buffer ac-source-abbrev ac-source-emmet-html-aliases ac-source-emmet-html-snippets ac-source-html-tag ac-source-html-attribute ac-source-html-attribute-2 ac-source-files-in-current-dir))))

  ;;("php" . (ac-source-words-in-buffer ac-source-filename))

  ;; DO NOT SET ac-source yasnippet. autocomplete does NOT play nicely with ac-source yasnippet
  ;; ac-source-yasnippet
  ;; Here are some pages that talk about getting yas and autocomplete to play nicely together
  ;; http://sethlakowske.com/why-i-use-emacs/fix-yasnippet-and-autocomplete-tab-key-collision/
  ;; https://stackoverflow.com/questions/19900949/how-to-make-auto-complete-work-with-yasnippet-and-abbrev
  ;; https://github.com/capitaomorte/yasnippet/issues/336
  ;; https://emacs.stackexchange.com/questions/9670/yasnippet-not-working-with-auto-complete-mode
  ;;I'm being more and more annoyed with ac-php
  ;; https://github.com/xcwen/ac-php/
  ;;ac-source-php
* provide this file
:PROPERTIES:
:ID:       0d7159ea-750a-4fce-9d5b-c8c77257b94c
:END:
#+BEGIN_SRC emacs-lisp
(provide 'init-html)
#+END_SRC
